<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品页</title>
    <link rel="stylesheet" href="../lib/css/swiper-bundle.min.css">
    <link rel="stylesheet" href="../css/index.css">
</head>

<body>
    <!-- 头部·-->
    <header>
        <img src="../static/mages/2.jpg" alt="">
        <form action="">
            <input type="text" name="ps" placeholder="搜索商品发现更多优惠">
            <input type="submit" name="pt" value="搜索">
        </form>
        <img src="../static/mages/1.jpg" alt="" class="en">
        <ul>
            <li><a href="../pages/logn.html">登录</a></li>
            <li><a href="../pages/enrol.html">注册</a></li>
            <li><a href="#">关注我们</a></li>
        </ul>
    </header>
    <!-- 导航-->
    <nav>
        <div class="sent">
            <ul>
                <li>首页</li>
                <li onclick="toNav(0)">9块9包邮</li>
                <li onclick="toNav(1)">超值大卷额</li>
                <li onclick="toNav(2)">夏季女装上市</li>
            </ul>
        </div>
    </nav>
    <!-- 主体-->
    <main>
        <aside>
            <ul>
                <li><span>女装</span>/<span>女鞋</span></li>
                <li><span>男装</span>/<span>男鞋</span></li>
                <li><span>美妆</span>/<span>个护</span></li>
                <li><span>零食王国</span></li>
                <li><span>母婴用品</span></li>
                <li><span>手机</span>/<span>数码</span></li>
                <li><span>文娱</span>/<span>家居</span></li>
                <li><span>生活用品</span></li>
            </ul>
        </aside>
        <!-- 轮播图-->
        <div class="con">
            <div class="swiper">
                <div class="swiper-wrapper">
                    <!-- 动态渲染-->
                </div>
                <!-- 如果需要分页器 -->
                <div class="swiper-pagination"></div>

                <!-- 如果需要导航按钮 -->
                <div class="swiper-button-prev"></div>
                <div class="swiper-button-next"></div>

                <!-- 如果需要滚动条 -->
                <div class="swiper-scrollbar"></div>
            </div>
            <img src="../static/mages/3.jpg" alt="" class="box1">
            <div class="ig">
                <img src="../static/mages/5.jpg" alt="">
            </div>
        </div>
        <!-- 菜单-->
        <div class="list">
            <h2>小编精选</h2>
            <p>每天更新</p>
        </div>
        <!-- 商品列表-->
        <div class="content">
            <!-- 动态渲染-->
        </div>
        <!-- 加载更多-->
        <div class="on">
            <button>加载更多</button>
        </div>
        <!-- 回到顶部-->
        <div class="totop">
            <button>回到顶部</button>
        </div>
    </main>
    <!-- 尾页-->
    <footer>
        <div class="end">
            <img src="../static/mages/6.jpg" alt="">
            <div class="text">
                <h2>熊猫优选</h2>
                <p>年轻人购物首选</p>
                <p>购物领卷更优惠</p>
            </div>
            <h2 class="sp"><span>|</span>下载app</h2>
        </div>
    </footer>
    <script src="../lib/js/swiper-bundle.min.js"></script>
    <script src="../lib/js/jquery-3.6.0.js"></script>
    <script src="../lib/js/axios.min.js"></script>
    <script src="../js/index.js"></script>
</body>

</html>